<!-- 柱状图（Bar chart） -->
<template>
    <div style="height: 100%;">
        <div :id="'chart-bar-' + keyword"></div>
        <div v-if="data.length<=0" style="margin-top: -5px;text-align: center;color: #CCCCCC;">
            {{noDataTxt}}
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                chart: null,
                data: []
            }
        },
        props: {
            keyword: {
                type: String,
                required: true
            },
            url: {
                type: String,
                required: true
            },
            param: {
                type: Object,
                default () {
                    return {};
                }
            },
            cols: {
                type: Array,
                required: true
            },
            defs: {
                type: Object,
                required: true
            },
            forceFit: {
                type: Boolean,
                default: false
            },
            height: {
                type: Number,
                default: 320
            },
            width: {
                type: Number,
                default: 420
            },
            plotCfg: {
                type: Object,
                default(){
                    return {}
                }
            },
            noDataTxt: {
                type: String,
                default: '没有可展示的数据'
            }
        },
        methods: {
            create(){
                this.chart = new this.G2.Chart({
                    id: 'chart-bar-' + this.keyword,
                    forceFit: this.forceFit,
                    width: this.width,
                    height: this.height,
                    plotCfg: this.plotCfg
                });
                this.chart.source(this.data, this.defs);
                this.chart.interval().position(this.cols[0] + '*' + this.cols[1]).color(this.cols[0]);
                this.chart.render();

                this.render();
            },
            render(){
                app.ajax.get(this.url, this.param, (res) => {
                    if (res.s === 0) {
                        this.data = res.data;

                        this.chart.changeData(this.data);
                        this.chart.repaint();
                    } else {
                        this.$Message.error("柱状图数据加载失败：" + res.msg);
                    }
                }, (err) => {
                    this.$Message.error("柱状图数据加载异常：" + err);
                });
            }
        },
        mounted(){
            this.create();
        }
    }
</script>